<template>
    <view>
        <block>
            <view
                class="diy-word component-diy"
                :style="
                    'margin-top: ' +
                    componentData.data.marginTop * 2 +
                    'rpx;margin-bottom: ' +
                    componentData.data.marginBottom * 2 +
                    'rpx; padding: 0 ' +
                    componentData.data.marginLeftRight * 2 +
                    'rpx;'
                "
            >
                <view class="top">
                    <view class="content">
                        <block v-if="wrap === 0">
                            <diy-navigator :url="componentData.data.url" @callback="callback">
                                <view
                                    class="title"
                                    :style="
                                        'text-align:' +
                                        componentData.data.textAlign +
                                        ';background-color: ' +
                                        componentData.data.bgColor +
                                        ';color:' +
                                        componentData.data.titleColor +
                                        ';font-size: ' +
                                        componentData.data.fontSize * 2 +
                                        'rpx;font-weight: ' +
                                        componentData.data.fontWeight +
                                        ';font-style: ' +
                                        componentData.data.fontStyle +
                                        ';text-decoration: ' +
                                        (componentData.data.underline || componentData.data.lineThrough
                                            ? componentData.data.underline + ' ' + componentData.data.lineThrough
                                            : 'none') +
                                        '; padding: ' +
                                        componentData.data.paddingTop * 2 +
                                        'rpx ' +
                                        componentData.data.paddingRight * 2 +
                                        'rpx ' +
                                        componentData.data.paddingBottom * 2 +
                                        'rpx ' +
                                        componentData.data.paddingLeft * 2 +
                                        'rpx;'
                                    "
                                >
                                    {{ componentData.data.text || '' }}
                                </view>
                            </diy-navigator>
                        </block>
                        <block v-else>
                            <diy-navigator :url="componentData.data.url" @callback="callback">
                                <view
                                    :class="'title ' + (wrap ? 'diy-word-btn' : '')"
                                    :style="
                                        'background-color: ' +
                                        componentData.data.bgColor +
                                        ';color:' +
                                        componentData.data.titleColor +
                                        '; font-size: ' +
                                        componentData.data.fontSize * 2 +
                                        'rpx; font-weight: ' +
                                        componentData.data.fontWeight +
                                        ';font-style: ' +
                                        componentData.data.fontStyle +
                                        '; text-decoration: ' +
                                        (componentData.data.underline || componentData.data.lineThrough
                                            ? componentData.data.underline + ' ' + componentData.data.lineThrough
                                            : 'none') +
                                        '; padding: ' +
                                        componentData.data.paddingTop * 2 +
                                        'rpx ' +
                                        componentData.data.paddingRight * 2 +
                                        'rpx ' +
                                        componentData.data.paddingBottom * 2 +
                                        'rpx ' +
                                        componentData.data.paddingLeft * 2 +
                                        'rpx; top:' +
                                        componentData.data.top * 2 +
                                        'rpx;left:' +
                                        componentData.data.left * 2 +
                                        'rpx;'
                                    "
                                >
                                    {{ componentData.data.text || '' }}
                                </view>
                            </diy-navigator>
                        </block>
                    </view>
                </view>
            </view>
        </block>
    </view>
</template>

<script>
import diyNavigator from '../diy-navigator/diy-navigator';
// plugin/components/diy-word/diy-word.js
export default {
    components: {
        diyNavigator
    },
    data() {
        return {};
    },
    /**
     * 组件的属性列表
     */
    props: {
        componentData: {
            type: Object
        },
        wrap: {
            type: Number,
            default: 0
        }
    },
    beforeMount() {},
    mounted() {
        // console.log('diy-word', this.componentData);
    },
    /**
     * 组件的方法列表
     */
    methods: {
        callback(e) {
            const myEventDetail = { ...e.detail }; // console.log('diy-img-callback',e,myEventDetail);

            this.$emit('callback', {
                detail: myEventDetail
            });
        }
    }
};
</script>
<style>
@import './diy-word.css';
</style>
